<template>
  <div class="container">
    <el-table class="table-title" border width="100%">
      <el-table-column
        :resizable="false"
        label="设备"
        width="6%"
      ></el-table-column>
      <el-table-column
        :resizable="false"
        label="当前状态"
        width="3%"
      ></el-table-column>
      <el-table-column
        :resizable="false"
        label="类型"
        width="13%"
      ></el-table-column>
      <el-table-column
        :resizable="false"
        label="开停机情况"
        width="32%"
      ></el-table-column>
      <el-table-column
        :resizable="false"
        label="开机时间"
        width="14%"
      ></el-table-column>
      <el-table-column
        :resizable="false"
        label="停机时间"
        width="14%"
      ></el-table-column>
      <el-table-column
        :resizable="false"
        label="原因"
        width="10%"
      ></el-table-column>
      <el-table-column
        :resizable="false"
        label="操作"
        width="6%"
      ></el-table-column>
    </el-table>
    <template v-for="i in outList">
      <el-collapse :key="i.index" v-model="activeNames">
        <el-collapse-item :name="i.index">
          <template slot="title"> {{ i.deptManageName }} </template>
          <el-table
            :data="i.list"
            border
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column label="设备" width="6%">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.equipmentName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="当前状态" width="3%">
              <template slot-scope="scope">
                <span
                  v-show="scope.row.operateType == 'START_UP'"
                  class="red-color circle"
                ></span>
                <span
                  v-show="
                    scope.row.operateType == 'START_FAIL' ||
                    scope.row.operateType == 'SHUT_DOWN' ||
                    scope.row.operateType == 'ACCIDENT' ||
                    scope.row.operateType == 'BREAKDOWN'
                  "
                  class="yellow-color circle"
                ></span>
              </template>
            </el-table-column>
            <el-table-column label="类型" width="13%">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.inPlan">
                  <el-radio
                    @click.native.prevent="changePlan(scope.row, 1)"
                    :label="1"
                    >计划内</el-radio
                  >
                  <el-radio
                    @click.native.prevent="changePlan(scope.row, 0)"
                    :label="0"
                    >计划外</el-radio
                  >
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="开停机情况" width="36%">
              <template slot-scope="scope">
                <el-radio-group
                  v-model="scope.row.operateType"
                  @change="changeVal(scope.row)"
                >
                  <el-radio :label="'START_UP'">开机成功</el-radio>
                  <el-radio :label="'START_FAIL'">开机不成功</el-radio>
                  <el-radio :label="'SHUT_DOWN'">停机成功</el-radio>
                  <el-radio :label="'ACCIDENT'">事故跳机</el-radio>
                  <el-radio :label="'BREAKDOWN'">故障停机</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="开机时间" width="14%">
              <template slot-scope="scope">
                <el-date-picker
                  size="mini"
                  v-model="scope.row.startTime"
                  :disabled="
                    scope.row.operateType == 'SHUT_DOWN' ||
                    scope.row.operateType == 'ACCIDENT' ||
                    scope.row.operateType == 'BREAKDOWN' ||
                    !scope.row.operateType
                  "
                  :type="'datetime'"
                  :format="dateFrm()"
                  :value-format="dateFrm()"
                  placeholder="选择日期"
                  @change="(val) => inputChange(scope.row, val)"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="停机时间" width="14%">
              <template slot-scope="scope">
                <el-date-picker
                  size="mini"
                  v-model="scope.row.endTime"
                  :disabled="
                    scope.row.operateType == 'START_UP' ||
                    scope.row.operateType == 'START_FAIL' ||
                    !scope.row.operateType
                  "
                  :type="'datetime'"
                  :format="dateFrm()"
                  :value-format="dateFrm()"
                  placeholder="选择日期"
                  @change="(val) => inputChange(scope.row, val)"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="原因" width="10%">
              <template slot-scope="scope">
                <el-input
                  :class="{
                    isRequired:
                      !scope.row.content &&
                      (scope.row.operateType == 'START_FAIL' ||
                        scope.row.operateType == 'ACCIDENT' ||
                        scope.row.operateType == 'BREAKDOWN'),
                  }"
                  type="textarea"
                  v-model="scope.row.content"
                ></el-input>
                <div
                  v-show="
                    !scope.row.content &&
                    (scope.row.operateType == 'START_FAIL' ||
                      scope.row.operateType == 'ACCIDENT' ||
                      scope.row.operateType == 'BREAKDOWN')
                  "
                  class="required"
                >
                  请填写原因
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="6%">
              <template slot-scope="scope">
                <el-button
                  icon="icon-tijiao"
                  size="mini"
                  @click="toSubmit(scope.row)"
                  >提交</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </template>
  </div>
</template>

<script>
import { queryLogList, logSubmit } from "@/api/operationManagement/runLog.js";
export default {
  created() {
    this.getTableData();
  },
  data() {
    return {
      tableHeight: 300,
      activeNames: [0],
      outList: [],
    };
  },
  mounted() {
    this.adjustSize();
    window.addEventListener("resize", this.adjustSize);
  },
  methods: {
    tableRowClassName({ row }) {
      return row.showColor ? "warning-row" : "";
    },
    adjustSize() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 330;
        // window.innerHeight:浏览器的可用高度
        // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
        // 后面的50：根据需求空出的高度，自行调整
      });
    },
    inputChange(type, val) {
      let date = new Date(val); //新建日期对象
      let dateNow = new Date();
      if (date.getTime() > dateNow.getTime()) {
        this.$message.error("不能选择未来时间！");
        type.startTime ? (type.startTime = "") : (type.endTime = "");
        return false;
      }
    },
    async toSubmit(row) {
      if (row.inPlan == 1 || row.inPlan == 0) {
        if (
          (row.operateType == "START_FAIL" ||
            row.operateType == "ACCIDENT" ||
            row.operateType == "BREAKDOWN") &&
          !row.content
        ) {
          // 请填写原因
        } else {
          row.operateTime = row.startTime || row.endTime;
          let { content, equipmentId, inPlan, operateTime, operateType } = row;
          let data = {
            content,
            equipmentId,
            inPlan,
            operateTime,
            operateType,
          };
          await logSubmit(data).then((res) => {
            if (res.code == 200) {
              row.showColor = false;
              // this.$message.success(res.description);
              this.$message.success("提交成功！");
              this.getTableData();
            }
          });
        }
      } else {
        this.$message.error("请将信息填写完整后再提交");
      }
    },
    // 日期数据处理
    dateFrm() {
      return "yyyy-MM-dd HH:mm";
    },
    // 查询表格数据
    async getTableData() {
      let { data } = await queryLogList();
      this.tableData(data);
    },
    changePlan(row, radio) {
      let type = "";
      switch (row.operateType) {
        case "START_UP":
          type = "开机成功";
          break;
        case "START_FAIL":
          type = "开机不成功";
          break;
        case "SHUT_DOWN":
          type = "停机成功";
          break;
        case "ACCIDENT":
          type = "事故跳机";
          break;
        case "BREAKDOWN":
          type = "故障停机";
          break;
      }
      if (row.operateType == "ACCIDENT" || row.operateType == "BREAKDOWN") {
        if (radio == 1) {
          this.$message.error(type + "一定是计划外!");
        } else {
          row.inPlan = 0;
        }
      } else if (
        row.operateType == "START_UP" ||
        row.operateType == "START_FAIL" ||
        row.operateType == "SHUT_DOWN"
      ) {
        if (radio == 0) {
          this.$message.error(type + "一定是计划内!");
        } else {
          row.inPlan = 1;
        }
      } else {
        row.inPlan = radio;
      }
    },
    changeVal(row) {
      row.showColor = true;
      row.content = "";
      let time = this.$utils.getCurrentDate("minutes");
      if (row.operateType == "START_UP" || row.operateType == "START_FAIL") {
        row.startTime = time; // 当前时间
        row.endTime = "";
      } else {
        row.endTime = time; // 当前时间
        row.startTime = "";
      }
      if (row.operateType == "ACCIDENT" || row.operateType == "BREAKDOWN") {
        row.inPlan = 0;
      } else {
        row.inPlan = 1;
      }
    },
    // 处理表格数据
    tableData(data) {
      let indexList = [0];
      let sum = 0;
      let sumList = [];
      let sameDeptName = data[0].deptManageName;
      for (let i = 0; i < data.length; i++) {
        if (sameDeptName == data[i].deptManageName) {
          sum = sum + 1;
          if (data.length - 1 == i) {
            sumList.push(sum);
          }
        } else {
          sameDeptName = data[i].deptManageName;
          indexList.push(i);
          sumList.push(sum);
          sum = 0;
          i--;
        }
      }
      data.map((i, index) => {
        if (i.operateType == "START_UP" || i.operateType == "START_FAIL") {
          i.startTime = i.operateTime;
          i.endTime = "";
        } else {
          i.endTime = i.operateTime;
          i.startTime = "";
        }
        i.index = index;
      });
      let listData = [];
      for (let i = 0; i < indexList.length; i++) {
        listData[i] = {
          index: i,
          deptManageName: data[0].deptManageName,
          list: data.splice(0, sumList[i]),
        };
      }
      let list = listData;
      this.outList = list;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  position: relative;
  height: inherit;
  overflow-y: auto;
  .el-input--mini {
    width: 210px;
  }
  /deep/ .el-input--mini .el-input__inner {
    padding-right: 20px;
  }
  /deep/ .el-table__header,
  /deep/ .el-table__body {
    width: 100% !important;
  }
  /deep/ .el-collapse .has-gutter {
    display: none;
  }
  .table-title {
    /deep/ .el-table__empty-block {
      display: none;
    }
  }
  /deep/ .el-radio__inner {
    box-shadow: none !important;
  }
  .circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    border-radius: 10px;
  }
  .red-color {
    background: #d3604a;
  }
  .yellow-color {
    background-color: #d2d81e;
  }
  /deep/ .el-table th > .cell,
  /deep/ .el-table__body td {
    text-align: center;
  }
  /deep/ .el-collapse-item__header {
    padding-left: 15px;
    border-top: 2px #2e9cd4 solid;
  }
  /deep/ .el-collapse-item__header::before {
    content: "";
    height: 0;
    display: none;
  }
  /deep/ .el-input__inner {
    width: 86%;
  }
  .isRequired {
    /deep/ .el-textarea__inner {
      border: 1px solid #f56c6c;
    }
  }
  .required {
    text-align: left;
    margin: 1px 3px;
    color: #f56c6c;
  }
  /deep/ .el-table .warning-row {
    background: oldlace !important;
  }
  /deep/ .el-table .warning-row {
    background: oldlace !important;
  }
  /deep/ .el-table tbody tr:hover > td {
    background-color: oldlace !important;
  }
  /deep/ .el-table__body .el-table__row.hover-row td {
    background-color: oldlace !important;
  }
  /deep/ .el-input__inner, .el-textarea__inner {
    font-weight: 600;
}
}
</style>